.uploader-avatar-war {
  display: flex;
  padding-left: calc(100vw - 100%);
  min-height: calc(100vh - 140px); 
  flex-direction: column;
  justify-content:center;
  margin: 0 auto;
  padding:20px;
  max-width:600px;
}

.avatar_upload_btn {

  .webuploader-pick {
    display: block;
    font-size: 17px;
    line-height: 1.25;
    color:#fff;
    padding: 10px 16px;
    background:#ccc;
    background-color: #f1a325;
    border-color: #ed980f;
  }
}
.avatar-view {
  padding:10px;
  text-align: center;
}
.avatar_preview {
  min-width:256px;
  margin:30px auto;
  text-align:center;
}


.avatar_btn {
  display: block;
}
.avatar_select {
  padding: 10px;
  p {
    margin: 0;
  }
}
.avatar-body{
    padding:15px;
}
.avatar-upload{
    overflow:hidden
}
.avatar-upload label{
    display:block;float:left;clear:left;width:100px
}
.avatar-upload input{
    display:block;margin-left:110px
}
.avater-alert{
    margin-top:10px;margin-bottom:10px
}
.avatar-wrapper{
    height:364px;width:100%;margin-top:15px;box-shadow:inset 0 0 5px rgba(0,0,0,.25);background-color:#fcfcfc;overflow:hidden
}
.avatar-wrapper img{
    display:block;height:auto;max-width:100%
}
.avatar-preview{
    float:left;margin-top:15px;margin-right:15px;border:1px solid #eee;border-radius:4px;background-color:#fff;overflow:hidden
}
.avatar-preview:hover{
    border-color:#ccf;box-shadow:0 0 5px rgba(0,0,0,.15)
}
.avatar-preview img{
    width:100%
}
.preview-lg{
    height:184px;width:184px;margin-top:15px
}
.preview-md{
    height:100px;width:100px
}
.preview-sm{
    height:50px;width:50px
}
@media(min-width:992px){
    .avatar-preview{
        float:none
    }
}
.avatar-btns{
    margin-top:30px;margin-bottom:15px
}
.avatar-btns .btn-group{
    margin-right:5px
}
.loading{
    display:none;position:absolute;top:0;right:0;bottom:0;left:0;opacity:.75;filter:alpha(opacity=75);z-index:20140628
}